<!-- 兰文杰 2020-05-26 09:48:55.499 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" value="唐礼飞">
<%@include file="/WEB-INF/pages/include/css-resource.jsp"%>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/lib/bootstrap-table/1.16.0/bootstrap-table.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/lib/jquery-treegrid/0.3.0/css/jquery.treegrid.css">

<title>功能管理</title>
</head>
<body>
	<%@include file="/WEB-INF/pages/include/header.jsp"%>
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/main.html"><i
					class="fas fa-home"></i>主页</a></li>
			<li class="breadcrumb-item active" aria-current="page">功能管理</li>
		</ol>
	</nav>
	<div class="container-fluid">
		<div class="row">
			<div class="col-12">
				<div id="toolbar">
					<a class="btn btn-primary" href=""><i class="fas fa-plus"></i>添加功能组
					</a> <a class="btn btn-primary" href=""><i class="fas fa-plus"></i>添加功能模块
					</a>
				</div>
				<table id="table"></table>
			</div>
		</div>
	</div>

	<%@include file="/WEB-INF/pages/include/js-resource.jsp"%>
	<script
		src="${pageContext.request.contextPath}/lib/jquery-treegrid/0.3.0/js/jquery.treegrid.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.16.0/locale/bootstrap-table-zh-CN.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.16.0/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
	<script type="text/javascript">
		var $table = $('#table')

		$(function() {
			$table.bootstrapTable({
				url : '${pageContext.request.contextPath}/api/function/list',
				striped : true,
				idField : 'id',
				toolbar : "#toolbar",
				showRefresh : true,
				showToggle : true,
				showColumns : true,
				columns : [ {
					field : 'name',
					title : '功能名称'
				}, {
					field : 'code',
					title : 'URL'
				}, {
					field : 'icon',
					title : '图标',
					align : 'center',
					formatter : 'iconFormatter'
				}, {
					field : 'disabled',
					title : '禁用',
					align : 'center',
					formatter : 'disabledFormatter'
				}, {
					field : 'id',
					title : '操作',
					align : 'center',
					formatter : 'actionFormatter'
				}, ],
				treeShowField : 'name',
				parentIdField : 'parent',
				onPostBody : function() {
					var columns = $table.bootstrapTable('getOptions').columns

					if (columns && columns[0][1].visible) {
						$table.treegrid({
							treeColumn : 0,
							onChange : function() {
								$table.bootstrapTable('resetWidth')
							}
						})
					}
				}
			})
		});

		function iconFormatter(value, row, index) {
			if (value == null) {
				return "";
			} else {
				return '<i class="'+value+'"></i>';
			}
		}

		function disabledFormatter(value, row, index) {
			return '<div class="custom-control custom-checkbox mr-sm-2"><input type="checkbox" class="custom-control-input" id="'
					+ row.id
					+ '" '
					+ (value ? "checked" : "")
					+ '> <label class="custom-control-label" for="'+row.id+'"></label></div>'
		}

		function actionFormatter(value, row, index) {
			return '<a class="btn btn-info btn-sm" title="编辑" href=""><i class="fas fa-edit"></i></a> &nbsp; <a class="btn btn-danger btn-sm" title="删除" href=""><i class="fas fa-trash"></i></a>';
		}
	</script>
</body>
</html>